<template>
  <view class="login-container">
    <view class="login-title">配送员登录</view>
    <view class="login-form">
      <input 
        v-model="username" 
        type="text" 
        placeholder="请输入用户名" 
        class="input-field"
      />
      <input 
        v-model="password" 
        type="password" 
        placeholder="请输入密码" 
        class="input-field"
      />
      <button @click="login" class="login-button">登录</button>
      <navigator url="/pages/courierRegister" class="register-link">
        没有账号？立即注册
      </navigator>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login() {
      // 登录逻辑
      if (!this.username || !this.password) {
        uni.showToast({
          title: '请输入用户名和密码',
          icon: 'none'
        });
        return;
      }

      uni.request({
        url: 'http://localhost:8080/api/courier/login',
        method: 'POST',
        data: {
          username: this.username,
          password: this.password
        },
        success: (res) => {
          if (res.data.code === 200) {
            // 存储 JWT token
            uni.setStorageSync('token', res.data.data.token);
            uni.setStorageSync('userRole', 'courier');
            
            // 跳转到主页
            uni.switchTab({
              url: '/pages/courierDashboard'
            });
          } else {
            uni.showToast({
              title: res.data.message || '登录失败',
              icon: 'none'
            });
          }
        },
        fail: (err) => {
          uni.showToast({
            title: '网络错误，请稍后重试',
            icon: 'none'
          });
        }
      });
    }
  }
}
</script>

<style scoped>
.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 50rpx;
}

.login-title {
  font-size: 40rpx;
  font-weight: bold;
  margin-bottom: 50rpx;
}

.login-form {
  width: 100%;
}

.input-field {
  width: 100%;
  padding: 20rpx;
  margin-bottom: 30rpx;
  border: 1px solid #ddd;
  border-radius: 10rpx;
}

.login-button {
  width: 100%;
  padding: 20rpx;
  background-color: #007bff;
  color: white;
  border-radius: 10rpx;
}

.register-link {
  display: block;
  text-align: center;
  margin-top: 20rpx;
  color: #007bff;
}
</style> 